import { Button } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { address_list, updata, del, defaultAddress } from '../apis/address'
import Navbar from '../components/Navbar'
import '../style/addresslist.scss'
import { Tag } from 'antd-mobile'
import { EditSOutline } from 'antd-mobile-icons'
import { updateOrderAddress } from '../apis/order'

export default function Addresslist() {
    const navigate = useNavigate()
    const location = useLocation()
    const [data, setdata] = useState([])
    const [bool, setbool] = useState(false)
    useEffect(() => {
        list()
        if (location.state) setbool(location.state.bool)
    }, [])

    let list = async () => {
        let res = await address_list(localStorage.getItem("userid"))
        setdata(res.data)
        // console.log(res.data);

    }

    let chengedefault = async (item: any) => {
        item.isDefault = !item.isDefault
        let res = await updata({ ...item })
        console.log(item.isDefault);
        console.log(res);
        list()
    }


    let edit = () => {

    }

    let dels = async (id: any) => {
        await del(id)
        list()
    }

    let see = async () => {
        let res = await defaultAddress(localStorage.getItem("userid"))
        console.log(res);

    }

    let order = async (item: any) => {
        const { userid, name, tel, province, city, county, addressDetail } = item
        const time = location.state.time
        let res = await updateOrderAddress({ userid, name, tel, province, city, county, addressDetail, time });
        console.log(res);
        navigate(-1)

        // console.log(location.state.bool);

    }
    return (
        <div className='addresslist'>
            <Navbar title="地址列表"/>

            <div className="list">
                {
                    data.map((item: any, index) => {
                        return (
                            <div key={index}>
                                {/* {...item,[location.state.time]} */}
                                <div className="item" onClick={() => bool ? order(item) : ""}>
                                    <input type="radio" name="default" checked={item.isDefault} onChange={() => { chengedefault(item) }} />

                                    <div className="info">
                                        <p>{item.name} <span>{item.tel}</span> {item.isDefault ? <Tag color='danger'>默认</Tag> : null}</p>
                                        <p>{item.province} <span>{item.city}</span> {item.county} {item.addressDetail}</p>
                                    </div>

                                    <EditSOutline onClick={() => { edit() }} />

                                </div>
                                <div className="edit">
                                    <p onClick={() => { dels(item.addressid) }}> 删除</p>
                                </div>
                            </div>
                        )
                    })
                }
            </div>

            <div className="footer">
                <Button block color='danger' shape='rounded' style={{ height: "44px" }} onClick={() => see()}>查看默认地址</Button>
                <Button block color='danger' shape='rounded' style={{ height: "44px" }} onClick={() => navigate("/addaddress")}>新增地址</Button>
            </div>
        </div>
    )
}
